<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header,
        .footer {
            width: 1200px;
            margin: 0 auto;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            height: 120px;
            color: #fff;
        }

        .footer {
            height: 300px;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: space-between;
            padding-top: 10px;
        }

        li {
            width: 290px;
            border: 1px solid #333;
            margin-bottom: 10px;
            padding: 5px;
            box-sizing: border-box;
        }

        li>img {
            width: 278px;
            height: 300px;
            display: block;
        }

        .pagination {
            width: 1200px;
            margin: 10px auto;
            height: 50px;
            display: flex;
            align-items: center;
        }

        .pagination>.prev,
        .pagination>.next {
            width: 50px;
            height: 30px;
            cursor: pointer;
            background-color: orange;
            font-size: 24px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pagination>.disable {
            cursor: not-allowed;
            background-color: #ccc;
        }

        .pagination>.total {
            font-size: 30px;
            font-weight: 700;
            margin: 0 20px;
        }

        .pagination>select {
            font-size: 22px;
            padding-left: 20px;
            margin-left: 30px;
        }
    </style>
</head>

<body>

    <div class="header">网页头部</div>
    <div class="pagination">
        <span class="prev disable">&lt;</span>
        <span class="total">1 / 100</span>
        <span class="next disable">&gt;</span>
        <select>
            <option value="4">4</option>
            <option value="8">8</option>
            <option value="12">12</option>
            <option value="16">16</option>
        </select>
    </div>
    <ul>

    </ul>
    <div class="footer">网页底部</div>
    <script src="./data.js"></script>
    <script>
        // console.log(list); //总数据
        // 每页从总数据 提取的范围
        // (current-1) * pagesize ~   current * pagesize -1
    //     var current = 3; // 第几页 当前的页数
    //     var pagesize = 8; // 每页显示的条数
    //     // 从总数据中截取第几页的数据 然后再渲染 
    //     var pagedata = list.slice((current - 1) * pagesize, current * pagesize);
    //     var data = pagedata.reduce(function (prev, item) {
    //         return prev + `
    //         <li>
    //     <img src="${item.pic}" alt="" width="278" height="278">
    //     <p>${item.name}</p>
    //     <p>价格:${item.price}</p>
    //     <p>城市:${item.city}</p>
    //     <p>地址:${item.address}</p>
    //     <p>时间:${item.showTime}</p>
    //   </li>
            
    //         `
    //     }, '');

    //     document.querySelector('ul').innerHTML = data;
        /* 
        分析:
                1. 打开页面的时候
                  1. 从数组内截取部分数据渲染页面(slice 方法)
                  2. 调整总页数相关信息
                    => 根据 当前第几页 填写斜线左边的内容
                    => 根据 总条数和一页多少条 填写斜线右边的内容
                  3. 调整 上一页按钮 的类名
                    => 如果是第一页, 就有 disable 类名和 prev 类名
                    => 如果不是第一页, 只有 prev 类名
                  4. 调整 下一页按钮 的类名
                    => 如果是最后一页, 就有 disable 类名和 next 类名
                    => 如果不是最后一页, 只有 next 类名
                  5. 调整 下拉框 内容
                    => 根据当前一页显示多少条来决定这个操作
                2. 点击下一页按钮
                  0. 把当前页 ++
                  1. 从数组内截取部分数据渲染页面(slice 方法)
                  2. 调整总页数相关信息
                    => 根据 当前第几页 填写斜线左边的内容
                    => 根据 总条数和一页多少条 填写斜线右边的内容
                  3. 调整 上一页按钮 的类名
                    => 如果是第一页, 就有 disable 类名和 prev 类名
                    => 如果不是第一页, 只有 prev 类名
                  4. 调整 下一页按钮 的类名
                    => 如果是最后一页, 就有 disable 类名和 next 类名
                    => 如果不是最后一页, 只有 next 类名
                  5. 调整 下拉框 内容
                    => 根据当前一页显示多少条来决定这个操作
                3. 点击上一页按钮
                  0. 把当前页 --
                  1. 从数组内截取部分数据渲染页面(slice 方法)
                  2. 调整总页数相关信息
                    => 根据 当前第几页 填写斜线左边的内容
                    => 根据 总条数和一页多少条 填写斜线右边的内容
                  3. 调整 上一页按钮 的类名
                    => 如果是第一页, 就有 disable 类名和 prev 类名
                    => 如果不是第一页, 只有 prev 类名
                  4. 调整 下一页按钮 的类名
                    => 如果是最后一页, 就有 disable 类名和 next 类名
                    => 如果不是最后一页, 只有 next 类名
                  5. 调整 下拉框 内容
                    => 根据当前一页显示多少条来决定这个操作
                4. 切换下拉框内容的时候
                  0. 修改一页显示多少条
                  1. 从数组内截取部分数据渲染页面(slice 方法)
                  2. 调整总页数相关信息
                    => 根据 当前第几页 填写斜线左边的内容
                    => 根据 总条数和一页多少条 填写斜线右边的内容
                  3. 调整 上一页按钮 的类名
                    => 如果是第一页, 就有 disable 类名和 prev 类名
                    => 如果不是第一页, 只有 prev 类名
                  4. 调整 下一页按钮 的类名
                    => 如果是最后一页, 就有 disable 类名和 next 类名
                    => 如果不是最后一页, 只有 next 类名
                  5. 调整 下拉框 内容
                    => 根据当前一页显示多少条来决定这个操作
        
        */

        /* 
           1. 书写函数  
                函数中做如下事情 
                1. 渲染当前页的数据  
                2. 修改当前第几页  总页数  上一页的按钮  下一页的按钮 下拉框

            2.    打开页面 以定执行函数 
            3.让用户交互　　
                点击上一页　页码－－　　调用函数　　防止越界　
                点击下一页　页码＋＋　　调用函数　　防止越界
                第几下拉框　 强制从第一页渲染        调用函数　
                表单中得到的ｖａｌｕｅ　是字符串　注意数据类型　
            
        
        
        */
        var current = 1; // 第几页 当前的页数
        var pagesize = 8; // 每页显示的条数
        var currentEle = document.querySelector('.total'); // 显示 当前页/ 总页数的地方
        var prevBtn = document.querySelector('.prev'); //上一页按钮
        var nextBtn = document.querySelector('.next'); //下一页按钮
        var selectBtn = document.querySelector('select'); //下拉框
        var total = list.length; //总数据条数
        var totalpage;
        function bindHTML() {
            // 从总数据中截取第几页的数据 然后再渲染 
            var pagedata = list.slice((current - 1) * pagesize, current * pagesize);
            // 拼接成 `<li></li><li></li><li></li><li></li><li></li>`
            // 然后赋值到ul中
            document.querySelector('ul').innerHTML = pagedata.reduce(function (prev, item) {
                return prev + `
                                <li>
                            <img src="${item.pic}" alt="" width="278" height="278">
                            <p>${item.name}</p>
                            <p>价格:${item.price}</p>
                            <p>城市:${item.city}</p>
                            <p>地址:${item.address}</p>
                            <p>时间:${item.showTime}</p>
                        </li>`
            }, '');

            totalpage = Math.ceil(total / pagesize); //总页数 
            // 修改 当前页/ 总页数的 数据
            currentEle.innerHTML = `${current} / ${totalpage}`;
            // 如果第一页  上一页按钮禁用
            prevBtn.className = current == 1?'prev disable':'prev';
            // 如果第二页  下一页按钮禁用 
            nextBtn.className = current == totalpage?'next disable':'next'
            // 每页条数 同步到下拉框中 
            selectBtn.value = pagesize
        }

        //打开页面调用函数 
        bindHTML();

        // 上一页 
        prevBtn.onclick = function(){
            //页码减减   current
            // 防止越界
            if(current === 1) return;
            current--;
            bindHTML();
        }
        // 下一页 
        nextBtn.onclick = function(){
            //页码加加   current
            if(current === totalpage) return;
            current++;
            bindHTML();
        }

        // 下拉框 
        selectBtn.onchange = function(){
            // 强制从第一页开始
            current = 1;
            // 用户选中哪个  每页条数就是多少
            pagesize = selectBtn.value - 0;
            // 根据新的 current 和 pagesize 渲染数据
            bindHTML();

        }


    </script>
</body>

</html>